<template>
    <div>
        <van-dialog v-model:show="show" title="新增读者" show-cancel-button @confirm="submitform" >
            <div class="dialogmain">
                <van-form v-model="formList" :rules="rules">
                    <van-cell-group inset class="addlist">
                        <van-field label="真实姓名" placeholder="请输入真实姓名" required v-model="formList.name" :rules="rules.name"></van-field>
                        <van-field  label="手机号" placeholder="请输入手机号" required v-model="formList.phone" :rules="rules.phone"></van-field>
                        <van-field  label="工号" placeholder="请输入工号" v-model="formList.number"></van-field>
                        <van-field  label="性别" >
                            <template  #input>
                                <van-radio-group v-model="formList.sex" direction="horizontal">
                                <van-radio name="女">女</van-radio>
                                <van-radio name="男">男</van-radio>
                            </van-radio-group>
                            </template>
                        </van-field>
                        <van-field  label="押金" placeholder="请输入押金" required v-model="formList.deposit" :rules="rules.deposit"/>
                    </van-cell-group>
                </van-form>
            </div>
        </van-dialog>
        <van-dialog v-model:show="successshow" title="成功" show-cancel-button>
           
        </van-dialog>
        <van-dialog v-model:show="fillshow" title="信息重新填" show-cancel-button @confirm="fillconfirm">
           
        </van-dialog>
        <van-nav-bar
          left-text="读者管理"
          left-arrow
          @click-left="onClickLeft"
        />
        <van-search
          show-action
          shape="round"
          placeholder="请输入搜索关键词"
        >
        <template #action>
            <span @click="showAdd"><van-icon name="add-o" color="blue"/></span>
        </template>
        </van-search>
        <div class="main">
            <!-- 列表 -->
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="reader-list" v-for="item in readersArr">
                <div class="reader-list-left">
                    <svg class="icon iconfont" aria-hidden="true">
                        <use xlink:href="#icon-human-male"></use>
                    </svg>
                </div>
                <div class="reader-list-middle">
                    <div class="reader-name"><van-icon name="user-o" />{{item.name}}</div>
                    <div class="reader-name"><van-icon name="phone-o" />{{item.phone}}</div>
                    <div class="reader-name"><van-icon name="label-o" />工号:{{item.number}}</div>
                    <div class="reader-name"><van-icon name="bill-o" />欠款:{{item.arrears}}</div>
                    <div class="reader-name"><van-icon name="bill-o" />押金:{{item.deposit}}</div>
                </div>
                <div class="reader-list-right">
                    <van-tag type="warning" style="vertical-align:top;margin-right: 2px;">停用</van-tag>
 
                    <span @click="deletereader(item.number)"><van-icon name="stop-circle-o" color="red"/></span>

                </div>
            </div>
            
            </van-list>

        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import '../../../font/iconfont'
import {getReadersListAPI,deleteReaderAPI,addReaderAPI} from '@/api/goodsApi'
import { ref, reactive, onMounted, Ref } from 'vue'
import { Dialog ,showDialog } from 'vant';


const show = ref(false)
const successshow = ref(false)
const fillshow =ref(false)


interface IReaders{
    id:number,
    name: string,
    phone:number,
    number:number,
    arrears:string,
    deposit:string
}
const list = ref([])
const loading = ref(false)
const finished = ref(false)


const formList =ref({
    name:'',
    phone:'',
    number:'',
    deposit:'',
    sex:''
})
// const confirmButtonDisabled = ref(true)
const rules= ref({
    name: [
        { required: true, message: '请输入真实姓名' },
        {pattern: /^[\u4e00-\u9fa5]+$/,message: '请输入汉字'}
        
      ],
      phone: [
        { required: true, message: '请输入手机号' },
        { pattern: /^\d{11}$/, message: '电话号码为11位数字' } ,

      ],
      deposit:[
        {required: true, message: '请输入押金'}
    ]
    })
const errors = ref({
    name:'',
    phone:'',
    number:'',
    deposit:'',
    sex:''
})

const validate = () => {
    // 校验逻辑
    // 判断name字段
    if(!formList.value.name) {
 
        
    errors.value.name = rules.value.name[0].message
    } else if(!(rules.value.name[1].pattern.test(formList.value.name))) {

        
    errors.value.name = rules.value.name[1].message  
    }

    // 判断phone字段
    if(!formList.value.phone) {

        
    errors.value.phone = rules.value.phone[0].message
    } else if(!(rules.value.phone[1].pattern.test(formList.value.phone))) {
   
        
    errors.value.phone = rules.value.phone[1].message
    }

    // 判断deposit字段  
    if(!formList.value.deposit) {

        
    errors.value.deposit = rules.value.deposit[0].message
    }

    
    if(Object.keys(errors.value).length) {
    return false
    }
    return true

}



let readersArr: Ref<IReaders[]> = ref<Array<IReaders>>([])


// 获取列表
 function onLoad() {
    getReadersListAPI().then((res:any)=>{
        console.log(res);
        if(res.code == 200){
            // readersArr.push(...res.data)
            readersArr.value = res.data
            finished.value=true;
            // console.log(123456789);
            // console.log(readersArr);

            
        }
    })

}

// 点击删除读者
const deletereader = (number:any)=>{
    console.log(number);
    
    deleteReaderAPI({
        number:number
    }).then((res:any)=>{
        if(res.code==200){
            // readersArr.splice(0,1)
            // readersArr = [res.data]
            // readersArr.length = res.data.length
            // readersArr.splice(0,res.data.length,...res.data)
<<<<<<< HEAD
            // readersArr = [...res.data]
           
            readersArr.splice(res.data.length,res.data)
            console.log(readersArr);
            console.log(res);
            
=======
            readersArr.value =  res.data
>>>>>>> 2d579aebb12168a31ce5be9776e14d93cff4da8e
        }
    })
}


// 点击新增弹出新增的框
const showAdd = ()=>{
    // showDialog({ message: '提示' });
    show.value=true
}

// 点击确定添加
const submitform=()=>{
    validate()

    if(!errors.value.name&&!errors.value.phone&&!errors.value.deposit){
        addReaderAPI({
        id:'12345',
        name:formList.value.name,
        phone:formList.value.phone,
        number:formList.value.number,
        sex:formList.value.sex,
        arrears:'0元',
        deposit:formList.value.deposit+'元'
    }).then((res:any)=>{
        console.log(res);
        readersArr.value.push(...res.data)
        successshow.value=true
        if(res.data.code == 200){
            formList.value.name=''
            formList.value.phone=''
            formList.value.number=''
            formList.value.sex=''
            formList.value.deposit=''
        }
    })
    }else{
        fillshow.value=true;
        errors.value.name=''
        errors.value.phone=''
        errors.value.deposit=''
    }
    
}

// 信息重新填确认按钮
const fillconfirm = ()=>{
        errors.value.name=''
        errors.value.phone=''
        errors.value.deposit=''
}

let $router = useRouter()

// 点击返回
function onClickLeft(){
    $router.back()
}
</script>

<style scoped lang="less">
.icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.main{
    width:100%;
    height:100%;
    padding: 5px 10px;
    .reader-list{
        padding:3px 3px;
        background-color: rgb(233, 250, 250);
        margin-bottom: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        .reader-list-middle{
            margin-right: 80px;
        }
    }
}
.dialogmain{
    background-color: rgb(233, 250, 250);
    padding: 10px 10px;
    .addlist{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    van-field{
        border-radius: 20%;
    }

}
</style>